<template>
  <div :class="bgclass">
    <div class="header">
      <div class="title">
        {{ props.title }}
        <span class="remark">{{ props.remark }}</span>
      </div>
      <div class="extra">
        <slot name="extra"></slot>
      </div>
    </div>
    <div class="card-content">
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
import { watch, reactive, ref } from "vue";

const props = defineProps({
  title: {
    type: String,
    default: "统计卡片",
  },
  remark: {
    type: String,
    default: "",
  },
  bg: {
    type: String,
    default: "1",
  },
});
const bgclass = computed(() => {
  const bg = ["card"];
  bg.push(`cardBg${props.bg}`);
  return bg;
});
</script>

<style lang="less" scoped>
.cardBg1 {
  background-image: url("@/assets/images/green/ab1.png");
  background-size: 100% 100%;
}

.cardBg2 {
  background-image: url("@/assets/images/green/ab2.png");
  background-size: 100% 100%;
}

.cardBg3 {
  background-image: url("@/assets/images/green/ab3.png");
  background-size: 100% 100%;
}

.card {
  background-color: rgba(13, 36, 33, 0.65);
  display: flex;
  flex-direction: column;
  pointer-events: all;
  // background-size: 100% 100%;
  // background-repeat: no-repeat;
  padding-top: 10px;
  box-sizing: border-box;

  .header {
    position: relative;
    height: 34px;
    padding-left: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-image: url(@/assets/images/green/card-header.png);
    background-size: 97% 100%;
    background-repeat: no-repeat;
    background-position: bottom;

    .title {
      font-family: PangMen;
      margin-left: 30px;
      color: #fff;
      font-size: 22px;
      font-style: normal;
      font-weight: 500;
      line-height: 36px;
      background: linear-gradient(90deg, #ffffff 0%, #90deff 100%);
      -webkit-background-clip: text;
      /*将设置的背景颜色限制在文字中*/
      -webkit-text-fill-color: transparent;
      /*给文字设置成透明*/
    }

    .remark {
      font-size: 12px;
    }
  }

  ::v-deep(.card-content) {
    // background-image: url("@/assets/images/redesign/ab.png");
    // background-size: 100% 100%;
    flex: 1;

    .stat-group {
      display: flex;
      width: 100%;
      box-sizing: border-box;
      padding: 8px;

      .item {
        box-sizing: border-box;
        flex: 1;
        text-align: center;
        margin: 4px 0px 0px 0px;

        .label {
          font-size: 14px;
          color: #dcdcdc;
          // cursor: pointer;
        }

        .value {
          font-size: 24px;
          color: #fefdfd;
          // cursor: pointer;
          line-height: 30px;

          font-family: "PingFang SC";

          &.text {
            font-family: "PingFang SC";
            font-size: 20px;
          }

          &.grey {
            color: #d7d7d7;
          }

          &.orange {
            color: #ffe477;
          }

          .suffix {
            font-family: "PingFang SC";
            font-size: 12px;
            font-weight: normal;
            margin-left: 2px;

            &.grey {
              color: #a9adb2;
            }
          }
        }
      }
    }

    .sub-title {
      line-height: 32px;
      font-family: "PangMen";
      font-size: 18px;
      background: linear-gradient(90deg, #ffffff 0%, #90deff 100%);
      -webkit-background-clip: text;
      /*将设置的背景颜色限制在文字中*/
      -webkit-text-fill-color: transparent;
      /*给文字设置成透明*/
    }
  }

  :deep(.extra) {
    pointer-events: all;
    padding-right: 8px;
    margin-bottom: 5px;
    color: #fff;
    --el-input-placeholder-color: #fff;

    .el-input__wrapper {
      border-radius: 5px;
      background-color: rgba(58, 56, 56, 0.582);
      box-shadow: none;

      input::placeholder {
        color: rgba(129, 205, 172, 0.735);
      }
    }

    .extra-more:hover {
      cursor: pointer;
      color: var(--el-color-primary);
    }

    .extra-more:active {
      scale: 0.95;
    }

    .date-type {
      display: flex;
      align-items: center;
      gap: 12px;

      div {
        padding: 0px 6px;
        color: #bbcfff;
        font-size: 12px;
        line-height: 20px;

        &.selected {
          background-color: #17b0dc;
          border-radius: 2px;
          color: #fff;
        }
      }

      div:hover {
        cursor: pointer;
        border-radius: 2px;
      }
    }
  }
}
</style>
